<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <meta charset="UTF-8">
	<title>金币明细</title>
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	
	<meta content="telephone=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/bill.css">
	<link rel="stylesheet" type="text/css" href="css/FJL.css" />
	<link rel="stylesheet" type="text/css" href="css/FJL.picker.css" />
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/FJL.min.js"></script>
	<script type="text/javascript" src="js/FJL.picker.min.js"></script>
	<style>


    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }

    </style>
    <link rel="stylesheet" href=" dist/dropload.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		localStorage.userToken = "${userToken}";
		localStorage.orderType = "${orderType}";
		localStorage.stream = "${stream}";
	});
	
	function toDetail(hisType,paramId,userId){
		var url = "";
		if(hisType == 1){
			
		}else if(hisType == 2){
			url = "<%=path %>/wap/taskPay-details?userId="+userId+"&taskId="+paramId;
		}else if(hisType == 4){
			url = "<%=path %>/wap/paySeller-details?userId="+userId+"&orderId="+paramId;
		}else if(hisType == 7 && paramId != ''){
			url = "<%=path %>/wap/payGold-details?userId="+userId+"&orderId="+paramId;
		}else if(hisType == 8 && paramId != ''){
			url = "<%=path %>/wap/payGold-details?userId="+userId+"&orderId="+paramId;
		}else if(hisType == 9){
			url = "<%=path %>/wap/paySeller-details?userId="+userId+"&orderId="+paramId;
		}
		//alert(url);
		if(url != ""){
			location.href = url;
		}
	}
	$(document).ready(function(){
	    $(window).scroll(function(){
	        var scroH = $(this).scrollTop();
	            $(".times").each(function(index, ele) {
	                $(this).data('top', $(this).offset().top) 
	                if ($(this).data('top') - scroH < 42 && $(this).data('top') - scroH != 0)
	                {
	                	$(this).addClass('go').siblings('.times').removeClass("go")
	                    console.log(scroH);
	                }
               		else if(scroH == 0 ) {
	                    console.log(scroH)
	                  $('.times').removeClass('go')
               		}
          		})
       });
    });
    (function($) {
    $.init();
    var result = $('.data');
    var btns = $('.btn');
    btns.each(function(i, btn) {
        btn.addEventListener('tap',
        function() {
            var optionsJson = this.getAttribute('data-options') || '{}';
            var options = JSON.parse(optionsJson);
            var id = this.getAttribute('id');
            var picker = new $.DtPicker(options);
            picker.show(function(rs) {
                alert(rs.value)
                picker.dispose();
            });
        },
        false);
    });
})(mui);
	</script>
</head>
<body>
	<section class="bill-list">
	 	<div>
	 		<div class="times">
	 			<h4>2017年1月</h4>
	 			<h5>收入500元 支出500元</h5>
	 			<div class="data btn mui-btn mui-btn-block" id='demo2' data-options='{"type":"date","beginYear":2000,"endYear":2086}'  ></div>
	 		</div>
	 		<ul class="lists">
	 			<c:forEach var="info" items="${goldHistoryList }">
	 		 	<li class="" onclick="toDetail('${info.hisType}','${info.paramId }','${info.userId }')">
	 				<div class="b-time">
	 					<h3>${info.YTD }</h3>
	 					<p>${info.time }</p>
	 				</div>
	 				<img src="${info.image }" alt="" class="b-mode " > <!-- 微信 固定头像 -->
	 				<div class="b-inf">
	 					<p><c:out value="${info.valNum }"></c:out></p>
	 					<div class="price"><span class="mode">${info.typedes }</span><span>${info.describe }</span></div>
	 					<div class="post">附言:</div>
	 				</div>
	 			</li>
	 		 </c:forEach>
	 		</ul>
	 	</div>
	 </section>

	<script src="dist/dropload.min.js"></script>
	<script>
	$(function(){
	    // 页数
	    var page = 1;
	    // 每页展示10个
	    var size = 15;

	    // dropload
	    $('.bill-list').dropload({
	        scrollArea : window,
	        domUp : {
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
	            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
	        },
	        domDown : {
	            domClass   : 'dropload-down',
	            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
	            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
	            domNoData  : '<div class="dropload-noData">暂无数据 </div>'
	        },
	        loadUpFn : function(me){
	        var mdate = {
	        		"pageNow":1,
	        		"pageSize":size,
	        		"stream":localStorage.stream,
		        	"orderType":localStorage.orderType,
		        	"userId":localStorage.userToken
	        	};
	            $.ajax({
	                type: 'GET',
	                url: 'getMygoldListJson',
	                dataType: 'json',
	                data:mdate,
	                success: function(data){
	                    var result = '';
	                    for(var i = 0; i < data.goldHistoryList.length; i++){ 
	                     		result+='<li class="" onclick="toDetail(\'${info.hisType}\',\'${info.paramId }\',\'${info.userId }\')">'+ 
	  					        '<div class="b-time">'+ 
	 					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ 
	  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ 
	  					        '</div>'+ 
	 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ 
	 	 				        '<div class="b-inf">'+ 
	 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ 
	 	 				        '<div class="price"><span class="mode">'+data.goldHistoryList[i].typedes+'</span><span>'+data.goldHistoryList[i].describe+'</span></div>'+
	 	 				        '</div>'+ 
	 	 				        '</li>';
	                    	};
	                    // 为了测试，延迟1秒加载
	                    setTimeout(function(){
	                        $('.lists').html(result);
	                        // 每次数据加载完，必须重置
	                        me.resetload();
	                        // 重置页数，重新获取loadDownFn的数据
	                        page = 1;
	                        // 解锁loadDownFn里锁定的情况
	                        me.unlock();
	                        me.noData(false);
	                    },1000);
	                },
	                error: function(xhr, type){
	                    alert('Ajax error!');
	                    // 即使加载出错，也得重置
	                    me.resetload();
	                }
	            });
	        },
	        loadDownFn : function(me){
	        
	            // 拼接HTML
	            var result = '';
	            page++;
	            var mdate = {
	        		"pageNow":page,
	        		"pageSize":size,
	        		"stream":localStorage.stream,
		        	"orderType":localStorage.orderType,
		        	"userId":localStorage.userToken
	        	};
	            $.ajax({
	                type: 'GET',
	                url: 'getMygoldListJson',
	                dataType: 'json',
	                 data:mdate,
	                success: function(data){
	                	var arrLen = data.goldHistoryList.length; 
	                    if(arrLen > 0){
	                     	for(var i = 0; i < data.goldHistoryList.length; i++){ 
	                     		result+='<li class="" onclick="toDetail(\'${info.hisType}\',\'${info.paramId }\',\'${info.userId }\')">'+ 
	  					        '<div class="b-time">'+ 
	 					        '<h3>'+data.goldHistoryList[i].YTD+'</h3>'+ 
	  					        '<p>'+data.goldHistoryList[i].time+'</p>'+ 
	  					        '</div>'+ 
	 	 				        '<img src="'+data.goldHistoryList[i].image+'" alt="" class="b-mode " > '+ 
	 	 				        '<div class="b-inf">'+ 
	 	 				        '<p>'+data.goldHistoryList[i].valNum+'</p>'+ 
	 	 				        '<div class="price"><span class="mode">'+data.goldHistoryList[i].typedes+'</span><span>'+data.goldHistoryList[i].describe+'</span></div>'+
	 	 				        '</div>'+ 
	 	 				        '</li>';
	                    	};
	                    	}else{
	                        // 锁定
	                        me.lock();
	                        // 无数据
	                        me.noData();
	                    }
	                    // 为了测试，延迟1秒加载
	                    setTimeout(function(){
	                        // 插入数据到页面，放到最后面
	                        $('.lists').append(result);
	                        // 每次数据插入，必须重置
	                        me.resetload();
	                    },1000);
	                },
	                error: function(xhr, type){
	                    //alert('Ajax error!');
	                    // 即使加载出错，也得重置
	                    me.resetload();
	                }
	            });
	        },
	        threshold : 50
	    });

	});
	</script>
</body>
</html>
